<template>
  <div class="menu">
    <el-aside width="200px">
      <!-- default-active:页面加载时默认激活菜单的index
      router:	是否启用 vue-router 模式。 
             启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。
       -->
      <el-menu
        class="el-menu-vertical-demo"
        background-color="rgb(78, 119, 161)"
        text-color="#fff"
      >
        <template v-for="(item,index) in menus.data" :key="item.menu_id">
          <el-sub-menu  :index="index" >
            <template #title>
              <router-link class='a' :to="item.menu_url">{{item.menu_name}}</router-link>
              <!-- <span>{{ item.menu_name }}</span> -->
            </template>
            <el-menu-item-group
              v-for=" (child,index) in item.children"
              :key="child.menu_id"
            >
              <el-menu-item :index="index">
                <router-link class='a' :to="child.menu_url">{{child.menu_name}}</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>

<script setup>
// 在 setup 里面没有访问 this所以我们不能再直接访问this.$router
// 使用useRouter()函数
// import { defineNuxtPlugin } from '#app'
// import { useRouter } from "vue-router";
import { getPermisson } from "@/api/api";
import { onMounted, reactive} from "vue";
// import emitter from "../../utils/bus.js";
// import { useStore } from "vuex"; // 引入useStore 方法
// import { ID_INJECTION_KEY } from 'element-plus'
// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// // const store = useStore(); // 该方法用于返回store 实例
// import { mapGetters } from "vuex";
// console.log(store); // store 实例对象
// 获取路由实例
// const router = useRouter();
// props: {
//   item: Object;
// }
let menus = reactive({
  data: [],
});

onMounted(() => {
  getData();
});

let getData = () => {
   getPermisson(localStorage.getItem('user_roleid')).then((res) => {
    // if (res.data.status === 200) {
      function RouterListFormat(data) {
        let parents = data.filter((p) => p.menu_parent_id === 0), //过滤函数 根据条件返回的是一个数组
          children = data.filter((c) => c.menu_parent_id != 0);
        console.log('parents',parents)
        console.log('children',children)

        dataTotree(parents, children);
        //递归函数
        function dataTotree(parents, children) {
          parents.map((p) => {
            children.map((c, index) => {
              if (c.menu_parent_id === p.menu_id) {
                //如果相同，拷贝children一个新的数组c1
                let c1 = Object.assign([], children);
                console.log('c1',c1)
                c1.splice(index, 1); //删除当前元素，获取除当前元素之外的所有子路由元素
                dataTotree([c], c1); //继续递归
                if (p.children) {
                  //如果该结点已经存在孩子，则直接加入孩子
                  p.children.push(c);
                } else {
                  //如果该结点不存在孩子，则让该结点的孩子等于数组c
                  p.children = [c];
                }
              }
            });
          });
        }
        console.log(parents);
        console.log(children);
        return parents;
      }
      const routerList = RouterListFormat(res.data.data.list); //转为tree型
      function generateRouter(UserRouter) {
        console.log("222222");
        let newRouters = UserRouter.map((r) => {
          let routes = {
            menu_url: r.menu_url,
            menu_name: r.menu_name,
            component: () => import(`@/components/${r.menu_component}.vue`), //利用字符串模板拼接
          };
          if (r.children) {
            //如果该结点有孩子，则继续递归
            routes.children = generateRouter(r.children);
          }
          return routes;
        });
        return newRouters;
      }
      // const newRoutes = generateRouter(routerList);
      menus.data = generateRouter(routerList);

      console.log("路由拦截获取到的数组", menus.data);
      //  menus.data .map((item) => {
      //     router.addRoute(item);
      //   });
      // console.log("新路由数据");
      // console.log(newRoutes);
      //   menus.data = newRoutes;
    // }
  })
  }

 


</script> 

<style lang='less'>
.menu {
  // 上下铺满，没有滚动条
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      .fa {
        margin-right: 10px;
      }
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
    .a{
      color:#fff;
      font-size:15px;
    }
  }
}
</style>